<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{ztreeBase::ztree})"></head>
<body class="layui-anim layui-anim-up">
	<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="#">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
	</div>
	<div class="x-body">
		<fieldset class="layui-elem-field site-demo-button" style="margin-top: -5px; float: left; width: 30%; height: 700px; display: inline;">
			<legend>系统菜单</legend>
			<div style="height: 665px; width: 100%; overflow: auto">
				<ul id="tree" class="ztree"></ul>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field site-demo-button" style="margin-top: -5px; margin-left: 20px; float: left; width: 30%; height: 700px; display: inline;">
			<legend>编辑</legend>
			<div style="margin-left: -5px; margin-top: 15px; margin-right: 25px;">
				<form id="form" class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">上级菜单</label>
						<div class="layui-input-block">
							<input type="text" id="parentName" name="parentName" autocomplete="off" class="layui-input" readonly="readonly" placeholder="上级菜单">
							<input type="hidden" id="pid" name="pid">
							<input type="hidden" id="id" name="id">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单名称</label>
						<div class="layui-input-block">
							<input type="text" id="nameZh" name="nameZh" lay-verify="required" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">英文简称</label>
						<div class="layui-input-block">
							<input type="text" id="nameEn" name="nameEn" lay-verify="required" autocomplete="off" placeholder="请输入英文简称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">访问URL</label>
						<div class="layui-input-block">
							<input type="text" id="url" name="url" autocomplete="off" placeholder="请输入访问URL" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">图标</label>
						<div class="layui-input-block">
							<input type="text" id="unicode" name="unicode" autocomplete="off" placeholder="请选择图标" class="layui-input" readonly="readonly" onclick="showIcons()">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-block">
							<input type="radio" name="status" lay-verify="required" value="0" title="启用">
							<input type="radio" name="status" lay-verify="required" value="1" title="禁用">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
							<button type="reset" class="layui-btn">重置</button>
						</div>
					</div>

				</form>
			</div>
		</fieldset>
	</div>
</body>
<script type="text/javascript" th:inline="javascript">
	var zTreeObj;
	//zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）$("input[name='status'][value=" + treeNode.status + "]").attr("checked",true);
	var zNodes = {
		id : 0,
		nameZh : '系统菜单',
		isParent : true
	};
	//zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	var setting = {
		view : {
			addHoverDom : addHoverDom,
			removeHoverDom : removeHoverDom,
			selectedMulti : false
		},
		edit : {
			enable : true,
			removeTitle : '删除菜单', // 删除按钮的 Title 辅助信息
			renameTitle : '编辑菜单',
			showRemoveBtn : showRemoveBtn,//删除按钮
			showRenameBtn : showRenameBtn//编辑按钮
		},
		callback : {
			beforeEditName : zTreeBeforeEditName,
			beforeRemove : zTreeBeforeRemove,
			beforeRename : zTreeBeforeRename,
			onRemove : zTreeOnRemove,
			beforeDrag: zTreeBeforeDrag
		},
		data : {
			key : {
				name : 'nameZh',
				url : 'xUrl'
			}
		},
		async : {
			enable : true,
			url : 'asyncTree',
			autoParam : [ 'id' ]
		}
	};
	//一般直接写在一个js文件中
	layui.use([ 'layer', 'form' ], function() {
		var layer = layui.layer, form = layui.form;
		//初始化菜单树
		zTreeObj = $.fn.zTree.init($('#tree'), setting, zNodes);
		//加载根节点
		var node = zTreeObj.getNodeByParam('id', 0, null);
		zTreeObj.reAsyncChildNodes(node, 'refresh', false);
		//监听提交
		form.on('submit(submit)', function(data) {
			$.ajax({
				//几个参数需要注意一下
				type : 'post',//方法类型
				dataType : 'json',//预期服务器返回的数据类型
				url : ctxPath + '/system/resource/save',//url
				data : $('#form').serialize(),
				success : function(result) {
					if (result.code == 0) {
						//更新父节点
						var pid = $('#pid').val();
						var node = zTreeObj.getNodeByParam('id', pid, null);
						//若这个父节点之前不存在子节点，则需要更新图标
						if (!node.isParent) {
							var parentNode = zTreeObj.getNodeByParam('id', node.pid, null);
							zTreeObj.reAsyncChildNodes(parentNode, 'refresh', false);
						}
						zTreeObj.reAsyncChildNodes(node, 'refresh', false);
						$('#form')[0].reset();
						layer.msg('保存成功！', {
							icon : 1
						});
						return;
					} else {
						layer.msg('保存失败。错误信息：' + result.msg, {
							icon : 2
						});
						return;
					}
				},
				error : function() {
					layer.msg('保存失败', {
						icon : 2
					});
				}
			});
			return false;
		});
	});

	//修改树节点
	function zTreeBeforeEditName(treeId, treeNode) {
		$('#form')[0].reset();
		$('#parentName').val(treeNode.getParentNode().nameZh);
		$('#pid').val(treeNode.getParentNode().id);
		$('#id').val(treeNode.id);
		$('#nameZh').val(treeNode.nameZh);
		$('#nameEn').val(treeNode.nameEn);
		$('#url').val(treeNode.url);
		$('#unicode').val(treeNode.unicode);
		$('input[name="status"][value=' + treeNode.status + ']').prop('checked', true);
		layui.form.render('radio');
		layer.msg('已同步[ ' + treeNode.nameZh + ' ]到表单');
		return false;
	}

	//删除树节点
	function zTreeBeforeRemove(treeId, treeNode) {
		layer.confirm('确认删除[ ' + treeNode.nameZh + ' ]及子菜单吗？', function(index) {
			$.ajax({
				//几个参数需要注意一下
				type : 'post',//方法类型
				dataType : 'json',//预期服务器返回的数据类型
				url : ctxPath + '/system/resource/delete',//url
				data : {
					id : treeNode.id
				},
				success : function(result) {
					if (result.code == 0) {
						//更新父节点
						var pid = treeNode.pid;
						var node = zTreeObj.getNodeByParam('id', pid, null);
						zTreeObj.reAsyncChildNodes(node, 'refresh', false);
						$('#form')[0].reset();
						layer.msg('删除成功！', {
							icon : 1,
							time : 1000
						});
						return;
					} else {
						layer.msg('删除失败。错误信息：' + result.msg, {
							icon : 2
						});
						return;
					}
				},
				error : function() {
					layer.msg('删除失败', {
						icon : 2
					});
				}
			});
		});
		return false;
	}

	function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
		var zTree = $.fn.zTree.getZTreeObj('tree');
		console.log(zTree);
		return false;
	}

	function zTreeOnRemove(event, treeId, treeNode) {
		console.log('zTreeOnRemove');
	}

	//移入展示新增按钮
	function addHoverDom(treeId, treeNode) {
		var sObj = $('#' + treeNode.tId + '_span');
		if (treeNode.editNameFlag || $('#addBtn_' + treeNode.tId).length > 0)
			return;
		var addStr = '<span class="button add" id="addBtn_' + treeNode.tId + '" title="新增菜单" onfocus="this.blur();"></span>';
		sObj.after(addStr);
		var btn = $('#addBtn_' + treeNode.tId);
		if (btn)
			btn.bind('click', function() {
				$('#form')[0].reset();
				$('#parentName').val(treeNode.nameZh);
				$('#pid').val(treeNode.id);
				$('input[name="status"][value=0]').prop('checked', true);
				layui.form.render('radio');
				layer.msg('可对[ ' + treeNode.nameZh + ' ]添加子菜单');
				return false;
			});
	}

	//移出隐藏新增按钮
	function removeHoverDom(treeId, treeNode) {
		$('#addBtn_' + treeNode.tId).unbind().remove();
	}

	//关闭树节点的拖拽功能
	function zTreeBeforeDrag() {
		return false;
	}

	//根节点不展示删除按钮
	function showRemoveBtn(treeId, treeNode) {
		return treeNode.level != 0;
	}

	//根节点不展示编辑按钮
	function showRenameBtn(treeId, treeNode) {
		return treeNode.level != 0;
	}
	//弹出图标列表，以供选择
	function showIcons(){
		admin_large_window('图标', ctxPath + '/iconFont');
	}
	//设置图标内容
	function setIconCode(code) {
		$('#unicode').val(code);
	}
</script>
</html>